<template>
  <div :id="id" :style="{width: width+'px', height: height+'px'}" :ref="id"></div>
</template>

<script>
  export default {
    name: "MyEchart",
    props: ['id','width','height','data'],
    methods: {
      drawLine(){
        // console.log('开始画图')
        // // 基于准备好的dom，初始化echarts实例
        let bar_dv = this.$refs[this.id]
        if (!bar_dv) return
        let myChart = this.$echarts.init(document.getElementById(this.id))
        console.log('drawLine()',this.config)
        let config
        if(this.data.type==='pie') {//画饼图
          config = Object.assign({
            series: this.data
            // series: config
          }, {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            }
          })
          
          
          console.log('饼状图:config',config)
        }
        else {
          config = this.data//画柱状图
          console.log('柱状图:config',config)
        }
        // 绘制图表
        console.log('33行打印config',config)
        myChart.setOption(config)
      }
    },
    mounted() {
      this.drawLine()
    },
    watch: {
      data(newVal) {
        // this.drawLine()
        console.log('data改变',newVal)
        // this.drawLine(newVal)
      }
    }
  }
</script>

<style scoped>
.myChart {
  background-color: red;
}
</style>